<!DOCTYPE html>
<html>
<head>
    <title>视频时间轴标记工具</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/videojs-markers/0.7.0/videojs.markers.css" rel="stylesheet">
    <style type="text/css">
        #screen_recording{
            width: 400px;
            height: 600px;
            margin: auto;
        }
        #btn-group{
        	width: 400px;
        	height: 200px;
        	margin: 0 auto;
        }
    </style>
</head>
<body>

<video id="screen_recording" class="video-js vjs-defalut-skin" controls preload="metadata">
    <source src="video.mp4" type="video/mp4">
</video>

<div class="btn-group" id="btn-group">
	<div>
    <button type="button" id="btn-prev">上一个标记位置</button>
    <button type="button" id="btn-next">下一个标记位置</button>
    <button type="button" id="btn-del">删除标记</button>
    <button type="button" id="btn-save">导出标记</button>
    </div>
   	<div>
    <button type="button" id="btn-start">开始采集</button>
    <button type="button" id="btn-like">点赞动作</button>
    <button type="button" id="btn-slide">浏览动作</button>
    <button type="button" id="btn-forward">转发动作</button>
    <button type="button" id="btn-click">点击动作</button>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script src="https://cdn.bootcss.com/videojs-markers/0.7.0/videojs-markers.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script type="text/javascript">
    var player = videojs('screen_recording');  //实例化对象

    player.markers({
        markerStyle:{  //标记样式
            'width':'7px',
        	'border-radius': '0%',
        	'background-color': 'orange'
        },
        markerTip:{  //悬停标记提示对象
            display:true,  //是否显示markerTips
            /*
              用于动态构建标记提示文本的回调函数。
              只需返回一个字符串，参数标记是传递给插件的标记对象
             */
             text: function(marker) {
                return "标记: " + marker.text;
             }
        },
        breakOverlay:{  //每个标记的中断覆盖选项
            display: true,  //是否显示叠加层
            displayTime: 3,
            style:{  //为叠加层添加css样式
                color:"red"
            },
            text: function(marker) {  //回调函数动态构建叠加文本
                return "叠加标记: " + marker.text;
            }
          },
          onMarkerReached:function(marker, index){  //只要播放到标记的时间间隔，就会出发此回调函数

          },
          onMarkerClick:function(marker,index){  //单击标记时会触发此回调函数，
              /*
                单击标记的默认行为是在视频中寻找该点，
                但是，如果onMarkerClick返回false，则将阻止默认行为
              */
          },
          markers:[
          
          ],
    });

    // var currentTime = 0

    // player.on('seeked', function(){
    // 	currentTime = player.currentTime();
    // });

    /****** 返回插件中当前标记的数组，按升序时间排序 ******/
    var getMarkers = player.markers.getMarkers();
    
    /****** 从视频中的当前时间转到下一个标记。 如果没有下一个标记，那么什么都不做 ******/
    
    $("#btn-next").click(function(){
        player.markers.next();
    })

    /****** 从视频中的当前时间转到上一个标记。 如果没有上一个标记，那么什么都不做 ******/
    
    $("#btn-prev").click(function(){
        player.markers.prev();
    })
    
    /****** 删除给定索引数组中的标记（从0开始） ******/
    $("#btn-del").click(function(){
        //player.markers.remove([1,3]);

        //删除所有标记
        player.markers.removeAll();
    })
    
    /****** 动态添加新标记 ******/
    $("#btn-start").click(function(){
        player.markers.add([{
           time: player.currentTime(),
           text: "start"
        }]);
    })
    
    $("#btn-like").click(function(){
        player.markers.add([{
           time: player.currentTime(),
           text: "like"
        }]);
    })

    $("#btn-slide").click(function(){
        player.markers.add([{
           time: player.currentTime(),
           text: "slide"
        }]);
    })

    $("#btn-forward").click(function(){
        player.markers.add([{
           time: player.currentTime(),
           text: "forward"
        }]);
    })

    $("#btn-click").click(function(){
        player.markers.add([{
           time: player.currentTime(),
           text: "click"
        }]);
    })

    $("#btn-save").click(function(){
    	var markers = player.markers.getMarkers();
    	var content = JSON.stringify(markers, ["time", "text"]);
    	var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
    	saveAs(blob, "markers.json");
    })
</script>
</body>
</html>